import React, { Component } from 'react'
import MarkDownDocs from '../../components/MarkDown'
import axios from 'axios'
import { Loading,Feedback } from '@icedesign/base';
import Container from '@icedesign/container';
import "./Home.scss"

const Toast = Feedback.toast;

export default class Home extends Component {
  static displayName = 'Home'

  constructor (props) {
    super(props)
    this.state = {
      initialSource: '',
      visible: true,
      mdpath:'',
    }
  }

  componentWillUnmount(){
    this._isMounted = false
  }

  componentDidUpdate(){
    const mdpath = this.props.params.mdpath;
    if (mdpath != this.state.mdpath){
      this._isMounted = true
      axios
        .get(mdpath == undefined?"mock/README.md":mdpath.replace(/\|/g,"/"))
        .then((response) => {
          if (this._isMounted) {
            const initialSource = ' \n' + response.data + ' '
            this.setState({
              initialSource: initialSource,
              visible: false,
              mdpath:mdpath,
            })
          }
        })
        .catch((error) => {
          Toast.error(error.msg == undefined ? '系统错误' : error.msg)
        })
    }
  }

  componentWillMount () {
    this._isMounted = true
    const mdpath = this.props.params.mdpath;
    axios
      .get(mdpath == undefined?"mock/README.md":mdpath.replace(/\|/g,"/"))
      .then((response) => {
        if (this._isMounted) {
          const initialSource = ' \n' + response.data + ' '
          this.setState({
            initialSource: initialSource,
            visible: false,
            mdpath:mdpath,
          })
        }
      })
      .catch((error) => {
        Toast.error(error.msg == undefined ? '系统错误' : error.msg)
      })
  }

  render(){
      return(
          <div>
              <Container>
                <MarkDownDocs source={this.state.initialSource}/>
              </Container>
          </div>
      )
  }

}
